<!-- add.html文件 -->
<#include "../common/scripts.html">
<#include "../common/scripts_add.html">
<#include "../common/scripts_add2.html">


<style type="text/css">

	/*禁用样式*/
	button[disabled], html input[disabled], textarea[disabled] {
		cursor: not-allowed;
	}

	.ewm {
		position: absolute;
		right: 0px;
		bottom: -150px;
		text-align: right;
		display: none;
		z-index: 100;
		border: 1px solid;
	}

	.apk-ma-little:hover .ewm {
		display: block;
	}

	.div-main {
		min-width: 1300px;
	}

	.redidual-ratio-question-tooltip {
		display: none;
	}

	.redidual-ratio-question-mark:hover + .redidual-ratio-question-tooltip {
		display: block;
	}


	.div-main {
		padding-bottom: 0px;
	}

	#extInfo {
		display: none;
	}

	input.attr-control[type='radio'], input.attr-control[type='checkbox'] {
		width: auto;
		vertical-align: top;
	}

	input.attr-control[type='radio'] + label, input.attr-control[type='checkbox'] + label {
		margin-bottom: 0;
	}

	.glyphicon-folder-open:before {
		margin-right: 5px;
	}

	.glyphicon-open:before {
		margin-right: 2px;
	}

	.glyphicon-plus:before {
		margin-right: 2px;
	}

	/* 表格样式 */
	/*
	table>thead>tr>th, table>thead>tr>td, table>tbody>tr>td {
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		font-weight: normal;
	}*/

	/* 相关文件》表格样式 */
	.file-name-container table tr th, .file-name-container table tr td {
		text-align: center;
		font-weight: normal;
	}

	/* table-main-2相关样式 */
	.table-main-2 {
		table-layout: fixed;
		word-break: break-all;
	}

	.table-main-2 th {
		border: 1px solid #DBF4FF;
		color: #0CB3FE;
	}

	.table-main-2 td {
		border: 1px solid #ccc;
	}

	.table-main-2 tr td:nth-child(odd) {
		text-align: center;
		width: 10% !important;
	}

	.table-main-2 tr td:nth-child(even) {
		width: 30% !important;
	}


</style>


<!--资产档案信息 -->
<div class="basic-news" style="padding-bottom: 96px;">
	<form action="" method="post" id="addForm" class="form-horizontal">
		<input type="hidden" id="id" name="id" value="${(authority.id)!}" class="">

		<!--左侧数据 -->
		<div class="leftdata" style="min-height: 415px; width: 90%;">

			<!-- 基础信息 -->
			<div class="form-group" style="">
				<div class="fh-subtitle" style="overflow: hidden; line-height: 32px;">
					菜单权限信息
				</div>

				<table id="tab_basic" style="width: 100%; border-collapse: collapse;" class="table-main-2">
					<tbody>
					<tr>
						<td><span>系统名称</span></td>
						<td>
							<input type="hidden" id="applicationId" name="applicationId" class="form-control-gx"
								   value="${(authority.applicationId)!}" readonly>
							<input type="text" id="applicationName" name="applicationName" class="form-control-gx"
								   value="${(authority.applicationName)!}" readonly>
						</td>
						<td><span>系统编号</span></td>
						<td><input type="text" id="applicationCode" name="applicationCode" class="form-control-gx"
								   value="${(authority.applicationCode)!}" readonly></td>
					</tr>
					<tr>
						<td><span>上级名称</span></td>
						<td><input type="text" id="parentName" name="parentName" class="form-control-gx"
								   value="${(authority.parentName)!}" onclick="getParentName()" readonly></td>

						<td><span>上级编码</span></td>
						<td><input type="text" id="parentCode" name="parentCode" class="form-control-gx"
								   value="${(authority.parentCode)!}" readonly></td>
					</tr>
					<tr>
						<td><span class="required-flag">*</span><span>名称</span></td>
						<td><input type="text" id="name" name="name" class="form-control-gx"
								   value="${(authority.name)!}"></td>

						<td><span class="required-flag">*</span><span>编码</span></td>
						<td><input type="text" id="code" name="code" class="form-control-gx"
								   value="${(authority.code)!}"></td>
					</tr>
					<tr>
						<td><span class="required-flag">*</span><span>菜单类型</span></td>
						<td>
							<select id="type" name="type" value="${(authority.type)!}"
									class="clear-default-select-icon select-gx selectpicker" data-live-search="true">
								<option value="">请选择</option>
								<option value="1">菜单</option>
								<option value="2">权限</option>
							</select>
						</td>

						<td><span>权限标识</span></td>
						<td><input type="text" id="permission" name="permission" class="form-control-gx"
								   value="${(authority.permission)!}"></td>
					</tr>
					<tr>
						<td><span>链接</span></td>
						<td><input type="text" id="href" name="href" class="form-control-gx"
								   value="${(authority.href)!}"></td>

						<td><span>一级图标</span></td>
						<td>
							<div class="input-group">
								<span class="input-group-addon" style="border: 0; border-right: 1px solid #ccc;">
									<i id="menuIconIcon" class="fa fa-fw ${(authority.icon)!}"></i></span>
								<input id="icon" name="icon" type="text" value="${(authority.icon)!}"
									   class="form-control" style="border: 0; border-right: 1px solid #ccc;">
								<span id="menuIconButton" class="input-group-btn btn btn-default"
									  style="font-size: 13px; border: 0; border-radius: 0;">
									<i class="fa fa-search"></i></span>
							</div>
						</td>
					</tr>
					<tr>
						<td><span>二级图标</span></td>
						<td>
							<span id="imgUrl_icon" class="input-group-addon"
								  style="border: 0; border-right: 1px solid #ccc; display: inline-block; width: 9%; height: 100%;">
							</span>
							<div style="display: inline-block; width: 89%; float: right;">
								<select id="imgUrl" name="imgUrl" value="${(authority.imgUrl)!}"
										onchange="showPic_imgUrl()" class="clear-default-select-icon select-gx selectpicker" data-live-search="true">
									<option value="">请选择</option>
                                    <#list imgUrlList as item>
										<option value="${item!}">${item!}</option>
                                    </#list>
								</select>
							</div>
						</td>

						<td><span>排序</span></td>
						<td><input type="text" id="sort" name="sort" class="form-control-gx"
								   value="${(authority.sort)!}"></td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>

		<!-- 清除浮动 -->
		<div class="clear-both"></div>

		<!--底部按钮 -->
		<div style="width: 100%; height: 40px; margin: 20px 0px 28px;">
			<div style="margin-top: 5px; text-align: center; width: 94%;">
				<button type="button" id="btn_submit" onclick="submit_authority()" class="btn btn-default"
						style="width: 90px; background-color: #66C9B7; color: #ffffff;">提交
				</button>
			</div>
		</div>
	</form>
</div>


<script type="text/javascript" src="${static}/page/back/customprint/file/cpTemple.js"></script>
<script type="text/javascript" src="${static}/page/back/device/js/img.js"></script>
<script src="${static}/js/custome-attr-utils.js"></script>

<script type="text/javascript">

	$(document).ready(function () {
		//渲染选择框
		$(".selectpicker").select2();
		
		//渲染imgUrl控件。
		$("#imgUrl").select2({
			//渲染imgUrl的option样式。
			templateResult: renderOptionStyle_imgUrl
		});
		
	});
	
	$(function () {
		//给type赋值
		$("#type").select2("val", ["${(authority.type)!}"]);

		//给imgUrl标签赋值。
		$("#imgUrl").select2("val", ["${(authority.imgUrl)!}"]);

		//给imgUrl_icon赋值。
		var imgUrl = "${(authority.imgUrl)!}";
		if (!isEmpty(imgUrl)) {
			//展示imgUrl对应的图片
			var imgTagStr = '<img src="${static}/' + imgUrl + '" class="">';
			$("#imgUrl_icon").empty().append(imgTagStr);
		}
	});
	
	/**
	 * 渲染imgUrl的option样式。
	 * @param
	 * @return
	 * @author cjw 2020-05-13
	 */
	function renderOptionStyle_imgUrl(item) {
		//若item.id为空
		if (isEmpty(item.id)) {
			return item.text;
		}
		var optionStr = '<span><img src="${static}/' + item.text + '" class=""> ' + item.text + '</span>';
		return $(optionStr);
	}
	
	/**
	 * 展示imgUrl对应的图片。
	 * @param
	 * @return
	 * @author cjw 2020-05-13
	 */
	function showPic_imgUrl() {
		var imgUrl = $("#imgUrl").val();
		//若imgUrl为空
		if (isEmpty(imgUrl)) {
			$("#imgUrl_icon").empty();
			return;
		}
		//展示imgUrl对应的图片
		var imgTagStr = '<img src="${static}/' + imgUrl + '" class="">';
		$("#imgUrl_icon").empty().append(imgTagStr);
	}

	/**
	 * 获取上级编码。
	 * @deprecated 待删
	 * @param
	 * @return
	 * @author cjw 2020-04-13
	 */
	function getParentName_0() {
		var nodeNames = [];
		PullDownTree_obj.init("${ctx}/authority/getAuthorityTree", "#parentName",
			{}, "#parentCode", false, "", "", function (treeId, treeNode) {
				getParent(treeNode);
				$("#parentName").val(nodeNames.join("/"));
				$("#parentName").parent().prop("title", nodeNames.join("/"));
				$("#parentCode").val(treeNode.value);
				$("#ztree-container").hide();
				return false;
			});
		
		function getParent(treeNode) {
			var parentNode = treeNode.getParentNode();
			if (parentNode != null) {
				getParent(parentNode);
			}
			nodeNames.push(treeNode.name);
		}
	}
	
	/**
	 * 获取上级编码。
	 * @param
	 * @return
	 * @author cjw 2020-04-11
	 */
	function getParentName() {
		PullDownTree_obj.init("${ctx}/authority/getAuthorityTree", "#parentName",
			{applicationId: "${(authority.applicationId)!}"}, "#parentCode", false,
			function (v, info) {
				$("#parentCode").val(info.value);
			});
	}
	
	//弹出layer窗口
	function window1(icon, title, url, width, heigth, type) {
		var title2 = title;
		if (!isEmpty(icon)) {
			title2 = '<img src="' + icon + '" width="20"/>' + title;
		}
		layer.open({
			type: 2,
			title: title2,
			maxmin: true,
			shadeClose: false, //点击遮罩层关闭
			shade: [0.1, '#fff'],
			area: [width + "", heigth + ""],
			offset: ['10px'],
			fixed: false,
			content: url
		});
	}
	
	
	/**
	 * 提交菜单权限信息。
	 * @param
	 * @return
	 * @author cjw 2020-03-31
	 */
	function submit_authority() {
		
		/**
		 * 验证填写的信息是否完整。
		 */
		if (isEmpty_byJqObj($("#applicationId"))) {
			sys.msg({
				"msg": "请填写applicationId!"
			});
			return false;
		}
		if (isEmpty_byJqObj($("#name"))) {
			sys.msg({
				"msg": "请填写名称!"
			});
			return false;
		}
		if (isEmpty_byJqObj($("#code"))) {
			sys.msg({
				"msg": "请填写编码!"
			});
			return false;
		}
		if (isEmpty_byJqObj($("#type"))) {
			sys.msg({
				"msg": "请选择菜单类型!"
			});
			return false;
		}
		
		/**
		 * 若type不为空时,根据type值分类判断相关字段是否完整。
		 */
		//若type为1,类型为"菜单"。
		if ($("#type").val() == "1") {
			//若icon,imgUrl都为空
			if (isEmpty_byJqObj($("#icon")) && isEmpty_byJqObj($("#imgUrl"))) {
				sys.msg({
					"msg": "请选择图标或图片地址"
				});
				return false;
			}
		}
		
		//若type为2,类型为"权限"。
		if ($("#type").val() == "2") {
			//permission
			if (isEmpty_byJqObj($("#permission"))) {
				sys.msg({
					"msg": "请填写权限标识!"
				});
				return false;
			}
			/*//href
			if (isEmpty_byJqObj($("#href"))) {
				sys.msg({
					"msg": "请填写链接!"
				});
				return false;
			}
			*/
		}
		
		/**
		 * 验证填写的信息是否有效。
		 */
		
		/**
		 * 提交资产信息
		 */
		var submitData = $("#addForm").serialize();
		console.log("submitData=", submitData);
		
		//若id为空,存入该authority。
		if (isEmpty_byJqObj($("#id"))) {
			sys.getApiData("addAuthority", submitData, function (data2) {
				//console.log("addAssetsArchive.response.data2", data2);
				if (data2.success) {
					js.showMessage("新增菜单权限成功!", null, "success", 1500);
					js.closeCurrentTabPage(function (contentWindow) {
						contentWindow.search();
					});
				} else {
					js.showMessage(data2.message, null, "error", 1500);
				}
			});
		} else {
			//若id不为空,更新该authority。
			sys.getApiData("updateAuthority", submitData, function (data2) {
				//console.log("addAssetsArchive.response.data2", data2);
				if (data2.success) {
					js.showMessage("更新菜单权限成功!", null, "success", 1500);
					js.closeCurrentTabPage(function (contentWindow) {
						contentWindow.search();
					});
				} else {
					js.showMessage(data2.message, null, "error", 1500);
				}
			});
		}
	}
	
	/**
	 * 验证填写的code,name是否有效。
	 * @param
	 * @return
	 * @author cjw 2020-05-07
	 */
	function checkCodeAndName() {
		var isValid = true;
		
		$.ajax({
			url: "${ctx }/authority/checkCodeAndName",
			type: "POST",
			datatype: "json",
			data: {
				id: $("#id").val(),
				code: $("#code").val(),
				name: $("#name").val(),
				applicationId: $("#applicationId").val()
			},
			success: function (data2, stats) {
				if (data2.success) {
					//若验证有效
				} else {
					isValid = false;
					sys2.msg(data2);
				}
			},
			error: function (data2) {
				isValid = false;
				sys2.msg({message: "检查code,name有效性时,出错!"})
			}
		});
	}
	
	/**
	 * 弹窗选择图标。
	 * @param
	 * @return
	 * @author from jeesite。
	 */
	$("#menuIconButton").click(function () {
		js.layer.open({
			type: 2,
			maxmin: true,
			shadeClose: true,
			title: '图标选择',
			area: ['1000px', '500px'],
			offset: ['10px'],
			fixed: false,
			content: '/authority/iconSelect?value=' + $("#icon").val(),
			success: function (layero, index) {
				var info = '<span style="color: red;" class="pull-left mt10">提示：双击选择图标。</span>';
				layero.find('.layui-layer-btn').append(info);
			},
			btn: ['<i class="fa fa-close"></i> 关闭',
				'<i class="fa fa-eraser"></i> 清除'],
			btn1: function (index, layero) {
				//将iframe #icon的值存入该页面#icon中。
				var win = layero.iframeWindow();
				var icon = win.$("#icon").val();
				$("#menuIconIcon").attr("class", 'fa fa-fw ' + icon);
				$("#icon").val(icon).change();
				//关闭弹窗
				layer.close(index);
			},
			btn2: function (index, layero) {
				//console.log("执行了btn2()方法..", index, layero);
				$("#menuIconIcon").attr("class", "fa fa-fw");
				$("#icon").val("").change();
			}
		});
	});


</script>

